<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 理想视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">

    <!-- 基础样式，包含  头部  搜索框  底部 -->
    <link rel="stylesheet" href="../css/base.css">

    <!-- 页面样式 ， 头尾、搜索框样式已包含在base文件中-->
    <link rel="stylesheet" href="../css/index.css">

    <title>登录</title>
    <style>
        body {
            background-color: #fff;
        }

        .header {
            width: 100%;
            height: 0.7rem;
            background-color: #ee7700;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.2rem;
        }

        .header a {
            width: 80%;
        }

        .header img {
            width: 53%;
        }

        .header span {
            font-size: 0.14rem;
            color: #f1f1f1;
            padding: 0.02rem 0.08rem;
            border: 0.01rem solid #f1f1f1;
        }

        form {
            width: 3.3rem;
            /*margin: 2rem auto;*/
            margin-left: .6rem;
            margin-top: 0.5rem;
        }

        form div:first-child{
            width: 5rem;
            font-size: 0.5rem;
            border-bottom: 1px solid #ee7700;
        }

        form input {
            width: 5rem;
            height: 0.7rem;
        }

        form input:nth-child(-n+3) {
            padding-left: .4rem;
        }

        form input:nth-child(4) {
            background-color: #ee7700;
            color: #fff;
            font-size: 0.35rem;
        }

        footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
        }
        h1{
            margin-top: .3rem;
            margin-bottom: .3rem;
            font-weight: normal;
            text-align: center;
            font-size: 0.26rem;
            width:5rem;
        }
        .icon{
            width: 5rem;
            display: flex;
            padding-left: .7rem;
        }
        .icon img{
            width: 40%;
        }

        .box{
            height: 1.2rem;
        }
    </style>
</head>

<body>
    <div class="header">
        <a href='../index.html' ><img src="../images/header_logo.png"></a>
        <span>下载</span>
    </div>
    <form action="">
        <div>登录</div>
        <input type="text" placeholder="输入用户名">
        <input type="password" placeholder="输入密码">
        <input type="submit" value="登 录">
        <h1>其他方式登录</h1>
        <div class="icon">
            <a href="https://web2.qq.com/"><img src="../images/qq.jpg"></a>
            <a href="https://wx.qq.com/"><img src="../images/weixin.jpg"></a>
            <a href="https://www.weibo.com/login.php"><img src="../images/weibo.jpg"></a>

        </div>

    </form>
    <div class="box"></div>


    <!-- footer 底部 -->
    <footer>
        <div class="footer_nav">
            <a href="./login.html">登录</a>
            <a href="./register.html">注册</a>
            <a href="javascript:;" class="toTop">返回顶部</a>
        </div>
        <div class="footer_app">
            <a href="javascript:;">手机app下载</a>
            <a href="javascript:;">慢慢买手机版</a>
            <span class="tips"> -- 掌上比价平台</span>
        </div>
        <div class="footer_com">m.manmanbuy.com</div>

    </footer>



    <!-- zepto -->
    <script src="../lib/zepto/dist/zepto.min.js"></script>
    <!-- art-template模板 -->
    <script src="../lib/art-template/template-web.js"></script>

    <!-- base文件中包含响应式字体设置等方法 -->
    <script src="../js/base.js"></script>



    <!-- 页面对应的js -->
    <!-- <script src="../js/index.js"></script> -->



</body>
<script>
  $(function () {
      $('.toTOP').on('click', function () {
          $('html').animate({ scrollTop: 0 }, 500);
          console.log(123);
      });
  })
</script>
</html>